<template>
    <div class="erpsku-input">
        <Input class="erpsku-input-input" v-model="erpSku" v-bind="inputProps" :readonly="showread=='showyes' ?false:true" @on-blur="handlesearch">
            <template #suffix>
                <Icon type="ios-search" style="font-size: 16px; margin-right: 10px; cursor: pointer;" @click="handleShowERPSKU" />
            </template>
        </Input>
        <compModal v-model="modalProps.show" v-bind="modalProps">
            <compManageErpSku v-if="erpskutype == 'manage'" @on-data="handleSelectERPSKU"></compManageErpSku>
            <compErpSku v-else @on-data="handleSelectERPSKU"></compErpSku>
        </compModal>
    </div>
</template>
<script>
import compErpSku from './erpsku';
import compManageErpSku from './erpskumanage';
export default {
    props: {
        value: {
            type: String
        },
        inputProps: {
            type: Object
        },
        showread:String,
        erpskutype:String,
    },
    components: {
        compErpSku,
        compManageErpSku
    },
    watch: {
        value: {
            immediate: true,
            handler (val) {
                console.log('改变erpsku', val)
                this.erpSku = val;
            },
        }
    },
    data () {
        return {
            row: {},
            erpSku: '',
            modalProps: {
                show: false,
                showFooter: false,
                title: this.$ct('erp.product.product_query', { defaultValue: '产品查询' }),
                width: 1000
            }
        }
    },
    mounted() {
        // this.$bus.on("changereset", value => {
        //     if(value === 'reset'){
        //         this.erpSku = ''
        //     }

        // });
	},
    methods: {
        handleShowERPSKU () {
            this.modalProps.show = true;
        },
        handlesearch(){
            this.$emit('data', {erpSku:this.erpSku});
        },
        handleSelectERPSKU (row) {
            console.log(row)
            this.row = row;
            this.modalProps.show = false;
            this.row = row;
            this.erpSku = row.erpSku;
            // this.value = this.erpSku;
            this.$emit('data', row);
            this.$emit('change', row.erpSku);
        }
    }
}
</script>
<style lang="scss" scoped>
.erpsku-input {
    display: inline-block;
    width: 100%;

    &-input {
        width: 100%;
    }
}
</style>